import * as echarts from 'echarts'

export interface MockData {
  months: string[]
  gdpData: number[]
  industryData: Array<{ name: string; value: number }>
  cityData: Array<{ name: string; value: number }>
}

export const generateMockData = (): MockData => {
  return {
    months: ['1月', '2月', '3月', '4月', '5月', '6月'],
    gdpData: [8500, 9200, 8800, 9500, 10200, 11000],
    industryData: [
      { name: '制造业', value: 35 },
      { name: '服务业', value: 45 },
      { name: '农业', value: 8 },
      { name: '建筑业', value: 7 },
      { name: '其他', value: 5 },
    ],
    cityData: [
      { name: '深圳', value: 3200 },
      { name: '广州', value: 2800 },
      { name: '佛山', value: 1200 },
      { name: '东莞', value: 1100 },
      { name: '惠州', value: 800 },
    ],
  }
}

export const getLineChartOption = (data: MockData) => ({
  backgroundColor: 'transparent',
  grid: {
    left: '10%',
    right: '10%',
    top: '20%',
    bottom: '15%',
  },
  xAxis: {
    type: 'category',
    data: data.months,
    axisLine: { lineStyle: { color: '#4a90e2' } },
    axisLabel: { color: '#ffffff' },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#4a90e2' } },
    axisLabel: { color: '#ffffff' },
    splitLine: { lineStyle: { color: 'rgba(74, 144, 226, 0.1)' } },
  },
  series: [
    {
      data: data.gdpData,
      type: 'line',
      smooth: true,
      lineStyle: { color: '#4a90e2', width: 3 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
          { offset: 1, color: 'rgba(74, 144, 226, 0.1)' },
        ]),
      },
      itemStyle: { color: '#4a90e2' },
    },
  ],
})

export const getPieChartOption = (data: MockData) => ({
  backgroundColor: 'transparent',
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      data: data.industryData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: { color: '#ffffff' },
      labelLine: { lineStyle: { color: '#ffffff' } },
    },
  ],
  color: ['#4a90e2', '#5cb85c', '#f0ad4e', '#d9534f', '#5bc0de'],
})

export const getBarChartOption = (data: MockData) => ({
  backgroundColor: 'transparent',
  grid: {
    left: '15%',
    right: '10%',
    top: '10%',
    bottom: '15%',
  },
  xAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#4a90e2' } },
    axisLabel: { color: '#ffffff' },
    splitLine: { lineStyle: { color: 'rgba(74, 144, 226, 0.1)' } },
  },
  yAxis: {
    type: 'category',
    data: data.cityData.map((item) => item.name),
    axisLine: { lineStyle: { color: '#4a90e2' } },
    axisLabel: { color: '#ffffff' },
  },
  series: [
    {
      data: data.cityData.map((item) => item.value),
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#4a90e2' },
          { offset: 1, color: '#357abd' },
        ]),
      },
    },
  ],
})

export const getGaugeChartOption = () => ({
  backgroundColor: 'transparent',
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 20000,
      splitNumber: 8,
      center: ['50%', '75%'],
      radius: '90%',
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.7, '#4a90e2'],
            [1, '#357abd'],
          ],
        },
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: { color: '#ffffff' },
      },
      axisTick: {
        length: 12,
        lineStyle: { color: '#ffffff', width: 2 },
      },
      splitLine: {
        length: 20,
        lineStyle: { color: '#ffffff', width: 4 },
      },
      axisLabel: {
        color: '#ffffff',
        distance: -60,
        fontSize: 10,
      },
      title: {
        offsetCenter: [0, '-10%'],
        color: '#ffffff',
        fontSize: 12,
      },
      detail: {
        fontSize: 20,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: '{value} 万',
        color: '#ffffff',
      },
      data: [{ value: 12600, name: '常住人口' }],
    },
  ],
})